import React, { useEffect, useState } from 'react'
import {
  MinusOutlined,
  FullscreenOutlined,
  CloseOutlined,
} from '@ant-design/icons'
import { message } from 'antd'
import styles from './index.module.less'
import Footer from '@/components/Footer'
import { getFriendProjectDetailApi } from '@/request/api/shareProject'
import MarkdownViewer from '@/components/MarkdownViewer'

export default function FrameTwo({ projectId, projectTitle }) {
  useEffect(() => {
    if (projectId) getFriendProjectDetail()
  }, [projectId])

  const [projectDetail, SetProjectDetail] =
    useState<getFriendProjectDetailItf>()

  // 获取好友分享的项目详情，包含收获，示例，笔记详情
  const getFriendProjectDetail = async () => {
    const res = await getFriendProjectDetailApi(projectId)

    if (res.code === 200) {
      scroll()
      return SetProjectDetail(res.data)
    }

    message.error('获取好友分享的项目详情失败！')
    SetProjectDetail(null)
  }

  // 滚动窗口到顶部
  const scroll = () => {
    const win = document.getElementsByClassName(styles.container)[0]
    win.scrollTo({ top: 0, behavior: 'smooth' })
  }

  return (
    <>
      {/* 头部 */}
      <Header projectTitle={projectTitle} />

      {/* 中间展示内容区域 */}
      <div className={styles.container}>
        {/* 内容详情 */}
        <div className={styles.project}>
          <div className={styles.projectTitle}>
            项目名称： {projectDetail?.project.title}
          </div>
          <div className={styles.projectDescription}>
            项目描述： {projectDetail?.project.description}
          </div>
          <div className={styles.divide}></div>

          {/* 收获列表 */}
          {projectDetail?.shareProjectHarvestDtoList.map((harvestItem) => {
            return (
              <div className={styles.harvestItem} key={harvestItem.harvest.id}>
                <div className={styles.harvestDesc}>
                  项目收获描述：{harvestItem?.harvest.description}
                </div>

                {/* 示例列表及其笔记列表 */}
                {harvestItem?.shareProjectExampleDtoList.map((exampleItem) => {
                  return (
                    <ShowContent
                      key={exampleItem.example.id}
                      content={exampleItem?.example.content}
                      list={exampleItem?.notesList}
                    />
                  )
                })}
              </div>
            )
          })}
        </div>

        {/* 底部 */}
        <Footer />
      </div>
    </>
  )
}

//
// 头部部分
function Header({ projectTitle }) {
  // 窗口最小化
  const minWindow = () => (window as any).readingWindow.minWindow()
  // 窗口最大化切换
  const maxWindow = () => (window as any).readingWindow.maxWindow()
  // 关闭窗口
  const closeWindow = () => (window as any).readingWindow.closeWindow()

  return (
    <div className={styles.headerContainer}>
      <div className={styles.label}>{projectTitle}</div>

      <div className={styles.controlBtns}>
        <MinusOutlined style={{ fontSize: '20px' }} onClick={minWindow} />
        <FullscreenOutlined style={{ fontSize: '20px' }} onClick={maxWindow} />
        <CloseOutlined style={{ fontSize: '20px' }} onClick={closeWindow} />
      </div>
    </div>
  )
}

//
// 数据展示部分
function ShowContent({ content, list }) {
  return (
    <div className={styles.showContent}>
      <div className={styles.divide}></div>

      <div className={styles.title}>收获示例：</div>

      <MarkdownViewer markdownContent={content} />

      {list?.map((item) => {
        return (
          <div className={styles.showContentList} key={item.id}>
            <div className={styles.divide}></div>

            <div className={styles.title}>示例笔记：</div>

            <MarkdownViewer markdownContent={item.content} />

            <div className={styles.divide}></div>
          </div>
        )
      })}

      <div className={styles.divide}></div>
    </div>
  )
}
